<template>
  <div class="inlineB">
    <ul class="previewWraper inlineB">
      <li v-for='(item,index) in srcList' :key='index' class="positionR inlineB">
        <img :src="item">
        <div class="positionA preciewMask">
          <span class="removeBtn inlineB cursor font12" @click="removePic(srcList,index)">重新上传</span>
        </div>
      </li>
    </ul>
    <label class="label" v-if="srcList.length<multi">
      <input name='file' type="file" ref="inputFile" @change='fileChange'>
    </label>
  </div>
</template>

<script>
import axios from 'axios'
import requestParam from '@/util/http/params'
import { cookie } from '@/util/cookie.js' // 引用刚才我们创建的util.js文件
import { DES3 } from '@/assets/js/DES3.js'
import Qs from 'qs'
const secret = '7$T5rcaOjA35bKoy&*dBbQS^ZPUsMDJj'
export default {
  data() {
    return {
      srcList: []
    }
  },
  props: {
    value: Array,
    type: {
      type: String,
      default: ''
    },
    multi: {
      type: Number,
      default: 1
    }
  },
  watch: {
    srcList(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.srcList = v
    }
  },
  methods: {
    clear2() {
    },
    // 上传视频的方法
    uploadVideo(file) {
      let formData = new FormData()
      formData.append('file', file)
      var config = {
        // 请求的接口，在请求的时候，如axios.get(url,config);这里的url会覆盖掉config中的url
        'url': '/user',
        // 请求方法同上
        'method': 'post', // default
        // 基础url前缀
        'baseURL': process.env.NODE_ENV === 'production' ? '/iFengChao-App-Web/' : '/iFengChao-App-Web/iFengChao-App-Web/',
        'headers': {
          'Content-Type': 'multipart/form-data', // 设置跨域头部
          'ifcToken': cookie('ifcToken')
        },
        'transformResponse': [function (data) {
          // 这里提前处理返回的数据
          data = JSON.parse(DES3.decrypt(secret, data))
          if (data) {
            return data
          }
        }],
        'params': requestParam,
        'timeout': 5000
      }
      axios.post('/upload/uploadCreativeVideo', formData, config)
        .then((res) => {
          if (res.data.resCode === '00000') {
            // this.getFirstImg(res.data)
          } else {
            this.alert({
              text: res.data.resMsg,
              resCode: res.data.resCode
            })
          }
        })
    },
    filereader(file) {
      var _this = this
      var reader = new FileReader()
      if (!reader) {
        alert('浏览器版本过低')
        _this.$refs.inputFile.value = ''
        return
      }
      reader.readAsDataURL(file)
      reader.onload = function (e) {
        _this.uploadImg(this.result)
      }
    },
    // 上传图片的方法
    uploadImg(base64) {
      var config = {
        // 请求的接口，在请求的时候，如axios.get(url,config);这里的url会覆盖掉config中的url
        'url': '/user',
        // 请求方法同上
        'method': 'post', // default
        // 基础url前缀
        'baseURL': process.env.NODE_ENV === 'production' ? '/iFengChao-App-Web/' : '/iFengChao-App-Web/iFengChao-App-Web/',
        'headers': {
          // 'Content-Type': 'application/x-www-form-urlencoded', // 设置跨域头部
          'ifcToken': cookie('ifcToken')
        },
        'transformRequest': [function (data) {
          // 这里可以在发送请求之前对请求数据做处理，比如form-data格式化等，这里可以使用开头引入的Qs（这个模块在安装axios的时候就已经安装了，不需要另外安装）
          let requestStr = JSON.stringify(data)
          data = Qs.stringify({ 'fileData': requestStr })
          return data
        }],
        'transformResponse': [function (data) {
          // 这里提前处理返回的数据
          data = JSON.parse(DES3.decrypt(secret, data))
          if (data) {
            return data
          }
        }],
        'params': requestParam,
        'timeout': 5000
      }
      base64 = base64.replace('image/jpeg', 'image/jpg')
      axios.post('/upload/image', base64, config)
        .then((res) => {
          if (res.data.resCode === '00000') {
            this.srcList.push(res.data.records[0])
          } else {
            this.$dialog.alert({
              text: res.data.resMsg,
              resCode: res.data.resCode
            })
          }
        })
    },
    // 点击重新上传执行
    removePic(list, index) {
      list.splice(index, 1)
    },
    // input触发change事件
    fileChange(event) {
      var file = event.srcElement ? event.srcElement.files[0] : event.target.files[0]
      // 当没有指定上传文件类型时
      if (!this.type) {
        if (file.name.indexOf('mp4') !== -1 || file.name.indexOf('flv') !== -1 || file.name.indexOf('swf') !== -1 || file.name.indexOf('swf') !== -1) {
          this.$dialog.alert({
            text: '上传文件格式错误'
          })
          this.$refs.inputFile.value = ''
          return
        }
        this.filereader(file)
      }
      // 指定上传类型并检测是否是视频格式
      if (this.type && (this.type.toLowerCase() === 'mp4' || this.type.toLowerCase() === 'flv' || this.type.toLowerCase() === 'swf' || this.type.toLowerCase() === 'avi')) {
        if (file.name.indexOf(this.type) !== -1) {
          this.uploadVideo()
        } else {
          this.$refs.inputFile.value = ''
          this.$dialog.alert({
            text: '上传视频格式不正确'
          })
        }
      }
      // 指定上传类型并检测是否是图片格式
      if (this.type && (this.type.toLowerCase() === 'jpg' || this.type.toLowerCase() === 'jpeg' || this.type.toLowerCase() === 'png' || this.type.toLowerCase() === 'gif')) {
        if (file.name.indexOf(this.type) !== -1 || file.name.indexOf('jpeg') !== -1) {
          this.filereader(file)
        } else {
          this.$refs.inputFile.value = ''
          this.$dialog.alert({
            text: '上传图片格式不正确'
          })
        }
      }
    }
  },
  mounted() {
  }
}
</script>
<style lang="stylus">
@import '~@/assets/css/variable'
.previewWraper
  height 130px
  li
    height 100%
    width 130px
    // border 1px solid #000
    overflow hidden
    &:hover
      .preciewMask
        top 0
    .preciewMask
      top -100%
      left 0
      width 100%
      height 100%
      background rgba(0, 0, 0, 0.5)
      transition all 0.3s
      .removeBtn
        line-height 1em
        padding 8px
        border-radius 15px
        color #fff
        background $color-ack-button
        position relative
        left 50%
        top 50%
        transform translate(-50%, -50%)
.label
  display inline-block
  width 130px
  height 130px
  // border 1px #b5b5b5 dashed
  cursor pointer
  border-radius 5px
  background url('../assets/img/addPic.png') no-repeat center
  input[type='file']
    display none
</style>
